<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户&渠道管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <Container class="u-mb15">
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-input
            v-model="value"
            size="mini"
            class="u-w300"
            placeholder="请输入客户名称、联系人或手机号"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-upload
            :action="apiUrl.uploadCustomer"
            :with-credentials="true"
            :on-success="handleSuccess"
            :on-progress="uploading"
            :beforeUpload="beforeAvatarUpload"
            :onError="uploadError"
            :show-file-list="false"
            :file-list="fileList"
          >
            <el-button size="mini">导入数据</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="newCustomer"
          >新建客户</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        element-loading-text="拼命上传中"
        :data="tableData"
        border
      >
        <el-table-column
          type="expand"
          align="center"
        >
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
            >
              <el-form-item label="客户代码">
                <span>{{ props.row.customerCode }}</span>
              </el-form-item>
              <el-form-item label="联系人">
                <span>{{ props.row.contact }}</span>
              </el-form-item>
              <el-form-item label="财务类型">
                <span>{{ props.row.finType>0?props.row.finType=='1'?'公司':'个人':'-'}}</span>
              </el-form-item>
              <el-form-item label="客户简称">
                <span>{{ props.row.name}}</span>
              </el-form-item>
              <el-form-item label="手机号码">
                <span>{{ props.row.phone}}</span>
              </el-form-item>
              <el-form-item label="纳税登记号">
                <span>{{ props.row.taxId}}</span>
              </el-form-item>
              <el-form-item label="客户主体">
                <span
                  v-for="item in JSON.parse(props.row.alias)"
                  :key="item.id"
                >{{ item.name+' '}}</span>
              </el-form-item>
              <el-form-item label="QQ">
                <span>{{ props.row.qq}}</span>
              </el-form-item>
              <el-form-item label="收款银行">
                <span>{{ props.row.bank}}</span>
              </el-form-item>
              <el-form-item label="客户性质">
                <span>{{ props.row.property>0?props.row.property=='1'?'公司':'个人':'-'}}</span>
              </el-form-item>
              <el-form-item label="邮箱">
                <span>{{ props.row.email }}</span>
              </el-form-item>
              <el-form-item label="开户地址">
                <span>{{ props.row.accountAddress }}</span>
              </el-form-item>
              <el-form-item label="营业执照号">
                <span>{{ props.row.busNo }}</span>
              </el-form-item>
              <el-form-item label="地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="银行账号">
                <span>{{ props.row.bankAccount }}</span>
              </el-form-item>
              <el-form-item label="证件有效期">
                <span>{{ props.row.cardExpired }}</span>
              </el-form-item>
              <el-form-item label="账号数量">
                <span>{{ props.row.backendAccountNum }}</span>
              </el-form-item>
              <el-form-item label="账户预收/抵扣">
                <span>{{ props.row.prePayment }}</span>
              </el-form-item>
              <el-form-item label="最后更新">
                <span>{{ props.row.lastEditDate }}</span>
              </el-form-item>
              <el-form-item label="">
                <span></span>
              </el-form-item>
              <el-form-item label="账户应收/实收">
                <span>{{ props.row.receivable }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="客户代码"
          prop="customerCode"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="客户简称"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="联系人"
          prop="contact"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="50"
          class-name="exitBut"
        >
          <template slot-scope="scope">
            <span
              @click.stop="exitEvent(scope.row.id)"
              class="u-cursor"
            >编辑</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, prev, pager, next, sizes, jumper"
        :total="page.count"
      >
      </el-pagination>
    </Container>
    <el-dialog
      title="提示"
      :visible.sync="importTitleStatus"
    >
      <div
        style="max-height: 400px; overflow: auto; line-height: 28px; margin-top: -20px;"
        v-html="importTitleTxt"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
export default {
  name: "cpa-customer-info",
  components: {
    Container
  },
  data() {
    return {
      page: {
        sizes: [10, 50, 100, 500],
        offset: 1,
        limit: 10,
        count: 0,
        currentPage: 1
      },
      menu_nav: ["CPA数据管理", "客户信息管理"],
      select_items: [
        {
          model_value: "",
          placeHolder: "客户",
          options: [
            {
              id: "1",
              val: "1"
            }
          ]
        }
      ],
      tableData: [],
      value: "",
      importTitleStatus: false,
      importTitleTxt: "",
      fileList: [],
      loading: false
    };
  },
  created() {
    this.listInfo();
  },
  methods: {
    listInfo() {
      /*列表*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerSearch,
        params: {
          offset: this.page.offset,
          limit: this.page.limit,
          val: this.value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.page.count = data.totalNum;
            this.tableData = data.items.length > 0 ? data.items : [];
          }
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.page.offset = val;
      this.listInfo();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.listInfo();
    },
    newCustomer() {
      this.$router.push({ path: "/cpa/customer-info-detail" });
    },
    exitEvent(id) {
      this.$router.push({
        path: "/cpa/customer-info-detail",
        query: { customerId: id }
      });
    },
    search() {
      if (this.value != "") {
        this.listInfo();
      }
    },
    exitImportTitle() {
      this.importTitleStatus = false;
      this.listInfo();
    }
  }
};
</script>
